<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">

		<title>读笔记</title>
		<link rel="stylesheet" href="https://dw-pro.iduov.com/dw-share/css/app.css">
		<script src="https://dw-pro.iduov.com/dw-share/js/vendor/flexible.js"></script>
		<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
		<style>
			.article-content {
				margin-top: 50px
			}
			
			.article-content img {
				width: 100%;
				/* height: 100% */
			}
			
			.article-content .tabCon p {
				line-height: 36px
			}
			
			.section-content {
				/* height: 8rem; */
				overflow: hidden;
				margin-bottom: 100px
			}
			
			.article-rec .note-title {
				padding: 0.4rem 0
			}
			
			.readNote-left {
				width: 1.0667rem;
				height: 1.0667rem;
				background: #eee;
				border-radius: 50%;
				overflow: hidden
			}
			
			.readNote-left img {
				vertical-align: middle;
				border-radius: 50%
			}
			
			.readNote-right {
				width: 7.8667rem;
				margin-left: 0.2667rem
			}
			
			.readNote-right .author-name {
				text-align: left;
				font-size: 14px;
			}
			
			.readNote-right ul.icon-items {
				margin-top: 0.16rem
			}
			
			.readNote-right ul.icon-items li:first-child {
				float: left;
				position: relative;
			}
			
			.readNote-right ul.icon-items li:nth-child(2) {
				float: right;
				position: relative;
			}
			
			.readNote-right ul.icon-items li:last-child {
				float: right;
				margin-right: 40px;
				position: relative;
			}
			
			.article-content .noteContentItem {
				margin: 0.3rem 0 0.5rem 0;
			}
			
			.article-content .noteContentItem img {
				width: 100%;
				vertical-align: middle
			}
			
			.seeMoreBtn {
				text-align: center;
				font-size: 14px;
				color: #01A3E2;
				padding: 5px
			}
			
			.readNote-pic {
				width: 100%;
				margin: 0.5333rem 0
			}
			
			.readNote-pic img {
				width: 100%;
				vertical-align: middle;
			}
			
			.readNote-left img,
			.readNote-pic img {
				vertical-align: middle
			}
			
			.bgContent {
				background: #f3f3f3;
				padding-bottom: 30px
			}
			
			.paragraph {
				margin-bottom: 30px;
				color: #333;
				font-size: 16px
			}
			
			.sectionTitle {
				padding: 6px 0 6px 20px;
				background: -webkit-linear-gradient(left, rgb(7, 165, 227), rgba(255, 255, 255, 1));
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, rgb(7, 165, 227), rgba(255, 255, 255, 1));
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, rgb(7, 165, 227), rgba(255, 255, 255, 1));
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, rgb(7, 165, 227), rgba(255, 255, 255, 1));
				color: #fff;
				font-size: 18px;
				/* width: 30%; */
				width: auto;
				margin-bottom: 20px
			}
			
			@keyframes fade-in {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fade-in {
				/*针对webkit内核*/
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			.noteItem {
				animation: fade-in;
				/*动画名称*/
				animation-duration: 1.5s;
				/*动画持续时间*/
				-webkit-animation: fade-in 1.5s;
				/*针对webkit内核*/
				margin-top: 30px;
				display: none;
			}
			
			.noteItem.active {
				display: block;
			}
			
			.noteNavs {
				display: flex;
				padding-top: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #e3e3e3;
				width: 100%;
				background: #fff;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
			}
			
			.noteNavs>li.active span {
				color: #01a3e2;
				padding-bottom: 8px;
				border-bottom: 2px solid #01a3e2;
			}
			
			img {
				vertical-align: middle;
			}
			
			.borderShadowHalf {
				box-shadow: rgba(0, 0, 0, 0.22) 0px 6px 7px 0px;
				padding: 10px;
				margin-bottom: 50px;
			}
			
			.titleGradient {
				background: linear-gradient(to right, #01a3e2 0%, #afe4f9 100%);
				background: -webkit-linear-gradient(to right, #01a3e2 0%, #afe4f9 100%);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(to right, #01a3e2 0%, #afe4f9 100%);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(to right, #01a3e2 0%, #afe4f9 100%);
			}
			
			.titleGradientWhite {
				background: linear-gradient(to right, #01a3e2 -26%, #fff 90%);
				background: -webkit-linear-gradient(to right, #01a3e2 -26%, #fff 90%);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(to right, #01a3e2 -26%, #fff 90%);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(to right, #01a3e2 -26%, #fff 90%);
			}
			
			.personPic {
				margin-top: 20px;
				border-radius: 4px;
				overflow: hidden
			}
			
			body {
				background: white
			}
			
			.no-content {
				position: absolute;
				top: 25%;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.tab-title {
				font-size: 18px;
				color: #333333;
				flex: 1;
				text-align: center;
				font-weight: bold
			}
		</style>
	</head>

	<body>
		<div id="article-detail" style="padding-bottom:100px">
			<div class="content" style="padding:0 4%">
				<ul class="noteNavs">
					<template v-for="(item,attr) in obj">
						<li class="tab-title" :class="{active:active==attr}" @click="active=attr">
							<span>{{item.type}}</span>
						</li>
					</template>
				</ul>
				<div class="article-content">
					<div class="tabCon">
						<div style="position:relative">
							<template v-for="(item,attr) in obj">
								<div class="noteItem" :class="{active:active==attr}" v-html="item.html"></div>
							</template>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			var note = new Vue({
				el:"#article-detail",
				data:{
					obj:{},
					active:"sel"
				},
				created(){
					this.getObj();
				},
				methods:{
					getObj(){
						this.obj = window.parent.app.getPreview();
					}
				}
			})
		</script>
	</body>

</html>